// 周边配套
<template>
  <div id="SupportDetailsList">
    <Header :currentCity="currentCity" :cityList="cityList"></Header>
    <Crumb :crumbListData="crumbListData"></Crumb>
    <div class="SupportDetailsList_wrap">
      <div class="SupportDetailsList_wrap_tabs">
        <div class="navAcitive">
          <ul>
            <li
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ activeNameTipe: activeCode == index }"
            >
              <a :href="prefixUrl + item.href">{{ item.name }}</a>
            </li>
          </ul>
        </div>
        <div>
          <div id="tabNameAll">
            <div class="problem_title">
              <h4>
                关于 {{ HouseDetail.name }}的
                <b style="color: #ff9800">{{ totalPage || 0 }}</b>个问答
              </h4>
              <div>
                <el-button type="primary" plain>
                  <a
                    href="javascript: void(0)"
                    @click="
                      loginType = 'problem';
                      popupproblem.show = true;
                    "
                    class="btn-add-fill"
                  >我要提问</a>
                </el-button>
              </div>
            </div>
            <div class="problem_body">
              <div class="problem_content" v-for="(item, index) in problemList" :key="index">
                <a :href="item.urls">
                  <div class="problem_content_left">
                    <h6>{{ item.content }}</h6>
                    <div class="problem_content_left_ativer" v-show="item.aNum > 0">
                      <el-image
                        :src="item.aUserImg?item.aUserImg:'https://v2static.cdn.pulizu.com/defaultAvatar.png'"
                        alt
                      ></el-image>
                      <p>
                        <b
                          v-html="
                          item.zzName && item.aUserName
                            ? item.zzName + `:` + item.aUserName
                            : '热心网友：✖✖✖✖✖✖✖✖✖✖用户'
                        "
                        ></b>
                        的回答
                      </p>
                      <span v-if="item.labs">{{item.labs}}</span>
                    </div>
                    <p class="problem_content_left_p1">{{ item.aContent || '' }}</p>
                    <p class="problem_content_left_p2">
                      <span v-if="item.datetime">发布于：{{item.datetime}}</span>
                    </p>
                  </div>
                  <div class="problem_content_right cursor">
                    <span>查看{{ item.aNum }}个回答 > ></span>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>

        <div class="Suppor_Suppor_more_button" v-if="problemCode&&totalPage>10">
          <el-button type="primary" class="Suppor_more" @click="getListData()">查看更多问答</el-button>
        </div>
        <!-- 关键区域，街道，周边 -->
        <keywordBox :currentCity="currentCity" :prefixUrl="prefixUrl" :regionList="regionList"></keywordBox>
      </div>
    </div>
    <Footer :currentCity="currentCity"></Footer>
    <!-- 提交问题 -->
    <PopupProblem
      :show="popupproblem.show"
      :title="popupproblem.title"
      :content="popupproblem.content"
      :textareaValue="popupproblem.textareaValue"
      :placeholder="popupproblem.placeholder"
      :confirmText="popupproblem.confirmText"
      :disabled="popupproblem.disabled"
      @close="popupproblem.show = false"
      @confirm="popupproblemConfirm"
    ></PopupProblem>
    <!-- 弹窗 -->
    <PopupProblemSuccess
      :show="popup.show"
      :cover="popup.cover"
      :title="popup.title"
      :desc="popup.desc"
      :confirmText="popup.confirmText"
      @confirm="
        popup.show = false;
        popupproblem.disabled = false;
      "
    ></PopupProblemSuccess>
  </div>
</template>

<script>
var head = {
  title: '成都✖✖✖✖✖✖✖✖✖✖', // 网页包头
  content: '成都✖✖✖✖✖✖✖✖✖✖', // 网页描述
  keywords: '成都,买房,管家,楼盘,买房网,✖✖✖✖✖✖✖✖✖✖', // 网页关键词
}
import axios from 'axios'
import u from '~/plugins/Ccom'
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
      ],
      link: [
        {
          rel: 'stylesheet',
          href: `/css/lpgk.css?v=${new Date().getTime()}`,
        },
      ],
    }
  },
  data() {
    return {
      activeCode: 7,
      userInfo: '',
      HouseRoomListCode: '全部',
      HouseRoomListCode: '全部',
      HouseRoomListIndex: 0,
      phone: '',
      textareaValue: '',
      popup: {
        show: false,
        cover:
          'https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20210907/8b2e500aa48e4a29abbc68cd53059a7f.png',
        title: '提交成功',
        desc: '您的问题已提交后台审核',
        confirmText: '确认',
      },
    }
  },
  validate(ctx) {
    return /(.*?)\.html/.test(ctx.params.id)
  },
  async asyncData(ctx) {
    var prefixUrl = ctx.prefixUrl //域名
    var currentCity = ctx.currentCity //城市定位
    var cityList = ctx.cityList //
    var crumbListData = [] //栏目信息
    var estateId = ctx.params.id ? ctx.params.id.split('.')[0] : '' //楼盘ID
    var pageNum = 1 //问答（页）
    var pageSize = 10 //问答（条）
    var totalPage = 0 //问答总条数
    var problemList = [] //问答列表
    var problemCode = true

    var tabList = [
      {
        name: '楼盘首页',
        href: `/lpxq/${estateId}.html`,
        aliases: '',
      },
      {
        name: '基础信息',
        href: `/lpxqxx/${estateId}.html`,
      },
      {
        name: '楼盘相册',
        href: `/lpxqxc/${estateId}.html`,
      },
      {
        name: '楼盘户型',
        href: `/lpxqhx/${estateId}.html`,
      },
      {
        name: '楼盘动态',
        href: `/lpxqdt/${estateId}.html`,
      },
      {
        name: '周边配套',
        href: `/lpxqpt/${estateId}.html`,
      },
      {
        name: '房价走势',
        href: `/lpxqzs/${estateId}.html`,
      },
      {
        name: '你问我答',
        href: `/lpxqwd/${estateId}.html`,
        aliases: 'wenda',
      },
      {
        name: '免费专车',
        href: `/mfzc/${estateId}.html`,
      },
    ]
    var HouseDetail = [] //楼盘详情数据

    var HouseRoomList = []
    // 获取楼盘详情
    var getMetro = await u.http({
      url: '/pc/houseDetail/queryHouseInfoDetailById',
      params: {
        estateId: estateId, //楼盘ID
      },
    })
    if (getMetro.code == 200) {
      HouseDetail = getMetro.data.houseInfoDetail
      head.title = `${HouseDetail.name},楼盘户型，周边配套，交通地图，${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`
      head.content = `✖✖✖✖✖✖✖✖✖✖为您提供${currentCity.cityName}${HouseDetail.name}问答,${HouseDetail.name}所有问答大全,要看详细,清晰的${HouseDetail.name}问答就上✖✖✖✖✖✖✖✖✖✖`
      head.keywords = `${HouseDetail.name}楼盘问答`
      // ==========楼盘面包屑============
      var regionCode = {
        title: `${HouseDetail.regionName}楼盘`,
        href: prefixUrl + `/lpcx/${HouseDetail.regionAliases}`,
      }
      var regionA = [HouseDetail.regionAliases]
      var streetA = [HouseDetail.streetAliases]
      var nowCrumbHref = u.emptyArrayIsNull(regionA.concat(streetA))
      if (HouseDetail.streetName && HouseDetail.streetAliases) {
        var streetCode = {
          title: `${HouseDetail.streetName}楼盘`,
          href: prefixUrl + `/lpcx/${nowCrumbHref.join('-')}`,
        }
      } else {
        var streetCode = null
      }

      var houseCode = {
        title: `${HouseDetail.name}`,
        href: prefixUrl + `/lpxq/${estateId}.html`,
      }

      // 修改栏目信息
      crumbListData = [
        {
          title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
          href: prefixUrl,
        },
      ]

      if (streetCode) {
        crumbListData.push(regionCode, streetCode, houseCode)
      } else {
        crumbListData.push(regionCode, houseCode)
      }
      // ==========楼盘面包屑============
    } else {
      // 202111091818 sry
      return ctx.redirect('/error.html')
    }

    var problem = await u.http({
      url: '/app/houseInfoQa/queryHouseQaList',
      params: {
        estateId: estateId, //楼盘ID
        type: 1,
        pageNum,
        pageSize,
      },
    })
    if (problem.code == 200) {
      problemList = problem.data.list
      problemList.forEach((item) => {
        // 202204141730 sry
        item.content = (item.content.search(HouseDetail.name) == -1) ? HouseDetail.name+item.content : item.content
        item.urls = prefixUrl + `/lpxqwdxq/${estateId}.html?id=${item.id}`
        if (item.createdTime) {
          var date = new Date(item.createdTime)
          var YY = date.getFullYear() + '-'
          var MM =
            (date.getMonth() + 1 < 10
              ? '0' + (date.getMonth() + 1)
              : date.getMonth() + 1) + '-'
          var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
          var hh =
            (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) +
            ':'
          var mm =
            (date.getMinutes() < 10
              ? '0' + date.getMinutes()
              : date.getMinutes()) + ':'
          var ss =
            date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
          return (item.datetime = YY + MM + DD + ' ' + hh + mm + ss)
        }
      })
      totalPage = problem.data.total
    }

    var popupproblem = {
      // 弹窗
      show: false,
      title: '有问必答',
      content: `对 ${HouseDetail.name} 的提问（必填）`,
      textareaValue: '',
      placeholder: '在这里输入您的问题（必填）',
      confirmText: '立即提问',
      disabled: false,
    }

    return {
      tabList,
      prefixUrl,
      currentCity,
      cityList,
      crumbListData,
      estateId,
      HouseDetail,
      HouseRoomList,
      problemList,
      totalPage,
      pageSize,
      pageNum,
      popupproblem,
      problemCode,
      regionList: ctx.regionList
    }
  },

  mounted() {},
  methods: {
    // ==========================弹窗==================================
    getListData() {
      this.pageNum = this.pageNum += 1
      u.http({
        client: true,
        url: '/app/houseInfoQa/queryHouseQaList',
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          estateId: this.estateId, //楼盘ID
          type: 1,
        },
      }).then((res) => {
        if (res.code == 200) {
          res.data.list.forEach((item) => {
            // 202204141730 sry
            item.content = (item.content.search(this.HouseDetail.name) == -1) ? this.HouseDetail.name+item.content : item.content
            item.labsArr = item.labs ? item.labs.split(',') : []
            item.urls =
              this.prefixUrl + `/lpxqwdxq/${this.estateId}.html?id=${item.id}`
            if (item.createdTime) {
              var date = new Date(item.createdTime)
              var YY = date.getFullYear() + '-'
              var MM =
                (date.getMonth() + 1 < 10
                  ? '0' + (date.getMonth() + 1)
                  : date.getMonth() + 1) + '-'
              var DD =
                date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
              var hh =
                (date.getHours() < 10
                  ? '0' + date.getHours()
                  : date.getHours()) + ':'
              var mm =
                (date.getMinutes() < 10
                  ? '0' + date.getMinutes()
                  : date.getMinutes()) + ':'
              var ss =
                date.getSeconds() < 10
                  ? '0' + date.getSeconds()
                  : date.getSeconds()
              return (item.datetime = YY + MM + DD + ' ' + hh + mm + ss)
            }
          })
          this.problemList = [...this.problemList, ...res.data.list]
          if (res.data.list.length == 0) {
            this.problemCode = false
          }
          return false
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
          })
        }
      })
    },
    // 立即提问
    popupproblemConfirm(e) {
      this.textareaValue = e
      var nowE = e.replace(new RegExp(/\s/, 'g'), '')
      if (nowE == '') {
        this.$message({
          message: '请输入您的问题内容',
          type: 'warning',
        })
        return false
      }
      if (!localStorage.getItem('userInfo')) {
        setTimeout((e) => {
          document.querySelector('#login').click()
        }, 300)
        return false
      }
      this.save()
    },
    // 提交信息
    save() {
      this.popupproblem.disabled = true
      this.popupproblem.show = false
      u.http({
        client: true,
        url: '/app/houseInfoQa/addHouseInfoQa',
        headers: {
          token: localStorage.getItem('token') || '',
        },
        params: {
          type: 2,
          estateId: this.estateId,
          content: this.textareaValue,
          cityCode: this.cityCode,
        },
      }).then((res) => {
        this.popupproblem.textareaValue = ''
        if (res.code == 200) {
          setTimeout((e) => {
            this.popup.show = true
          }, 300)
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error',
        })
      })
    },
  },
}
</script>